<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <style>
    path {
      fill: #e3e3e3;
      stroke-width: 1px;
      stroke: #666;
    }
  </style>
</head>
<body>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
<script src="../build/flubber.min.js"></script>
<script>
var svg = d3.select("svg"),
    path = svg.append("path");

d3.json("lower48.topo.json", function(err, topo) {
  // Get a single list of coordinates for each state
  var states = topojson.feature(topo, topo.objects.states)
    .features.map(function(d) {
      return d.geometry.coordinates[0];
    });

  d3.shuffle(states);

  draw();

  function draw() {
    var a = states[0],
        b = states[1],
        interpolator = flubber.interpolate(a, b);

    states.push(states.shift());

    path.attr("d", interpolator(0));

    // Morph
    path.transition()
      .delay(100)
      .duration(800)
      .attrTween("d", function() { return interpolator; })
      .on("end", draw);
  }
});
</script>
